<!--
盒模型--边界
-->
<!--
元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。如下代码：
div{margin:20px 10px 15px 30px;}
也可以分开写：
div{
   margin-top:20px;
   margin-right:10px;
   margin-bottom:15px;
   margin-left:30px;
}
如果上右下左的边界都为10px;可以这么写：
div{ margin:10px;}
如果上下边界一样为10px，左右一样为20px，可以这么写：
div{ margin:10px 20px;}
总结一下：padding和margin的区别，padding在边框里，margin在边框外。
-->
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>边距</title>
    <style type="text/css">
        div{
            width:300px;
            height:300px;
            border:1px solid red;
        }
        #box1{margin-bottom:30px;}
    </style>
</head>
<body>
<div id="box1">box1</div>
<div id="box2">box2</div>
</body>
</html>